<!--
    * Author: tiankai
    * Github: https://github.com/tiakia
    * Email: tiankai0426@sina.com
    * Page: canvas Demo
    * Date: 09/19/18 15:32:48
  -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-title" content="canvas-demo">
    <meta name="author" content="Tiankai">
    <!--<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />-->
    <title>canvas-demo</title>
    <style>
     #app {
         text-align: center;
         border: 1px solid #ddd;
         border-radius: 5px;
     }
     a {
         display: inline-block;
         padding: 5px 8px;
         border: 1px solid #ddd;
         border-radius: 5px;
         margin-right: 10px;
     }
     .rgbaCon {
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         align-items: center;
     }
     .rgbaResult {
         min-width: 300px;
     }
     #rgbaValue {
         width: 100%;
         height: 100px;
         border: 1px solid #000;
         border-radius: 5px;
         margin-bottom: 20px;
     }
     #rgbaText {
         display: inline-block;
         width: 100%;
         text-align: center;
     }
     #getImageData {
         border: 1px solid #ddd;
     }
    </style>
  </head>
  <body>
      <div id="app">
          <a href="./mask.html">图片蒙版</a>
          <a href="./granule.html">图片颗粒</a>
          <h1>Canvas 获取 rgba 值</h1>
      <div class="rgbaCon">
        <canvas id="getImageData"></canvas>
        <div class="rgbaResult">
          <div id="rgbaValue">
          </div>
          <span id="rgbaText"></span>
        </div>
      </div>
    </div>
    <script src="./js/getImageData.js"></script>
  </body>
</html>
